<template>
	<view class="detail" >
        <SRV-topbar :title="info.pageTitle" messageNum='0' isLeft='true'></SRV-topbar>
        <!-- <view class="top">
        	<uniSearchBar placeholder="请输入关键词搜索" radius="36" cancelButton="none" v-model="keywords" searchWidth="500rpx"></uniSearchBar>
        	<label @click="searchFun()">搜索</label>
        </view> -->
        
        <view class="dataInfo" v-if="info.dataState">
            <view @click="jump(info.dataJumpType, info.dataJumpVal)">{{info.dataTitle}}：{{info.dataVal}}</view>
        </view>
        <view class="nav">
        	<view :class="'item ' + (selOrder == 2 ? 'selCate' : '')" @click="selOrderFun(2)">
                <image src="http://hdsq.aoorange.cn/attachment/xcx/icon/icon4.png" mode="aspectFill" ></image>
        		<text>价格优先</text>
        	</view>
        	<view :class="'item ' + (selOrder == 1 ? 'selCate' : '')" @click="selOrderFun(1)">
                <image src="http://hdsq.aoorange.cn/attachment/xcx/icon/icon5.png" mode="aspectFill" ></image>
        		<text>销售优先</text>
        	</view>
            <view class="item" @click="searchFun('other')">
                <image src="http://hdsq.aoorange.cn/attachment/xcx/new_2022/search.png" mode="aspectFill" ></image>
            	<text>高级搜索</text>
            </view>
        </view>
       <view class="search_field" v-if="searchInfo.isSearch">
        	<view class="field" v-if="searchInfo.keywords != ''">
        		<view>{{searchInfo.keywords}}</view>
                <!-- <view class="close_field" @click="closeField('keywords')">X</view> -->
        	</view>
            <view class="field" v-if="searchInfo.brandName != ''">
            	<view>{{searchInfo.brandName}}</view>
                <!-- <view class="close_field" @click="closeField('brandId')">X</view> -->
            </view>
            <view class="field" v-if="searchInfo.cateName != ''">
            	<view>{{searchInfo.cateName}}</view>
                <!-- <view class="close_field" @click="closeField('cateId')">X</view> -->
            </view>
			<view class="field" v-if="searchInfo.seriesName != ''">
				<view>{{searchInfo.seriesName}}</view>
			    <!-- <view class="close_field" @click="closeField('cateId')">X</view> -->
			</view>
            <!-- <view class="field" v-if="searchInfo.isRecommend != ''">
            	<view>{{searchInfo.isRecommend}}</view>
                <view class="close_field" @click="closeField('isRecommend')">X</view>
            </view>
            <view class="field" v-if="searchInfo.isHot != ''">
            	<view>{{searchInfo.isHot}}</view>
                <view class="close_field" @click="closeField('isHot')">X</view>
            </view>
            <view class="field" v-if="searchInfo.isNew != ''">
            	<view>{{searchInfo.isNew}}</view>
                <view class="close_field" @click="closeField('isNew')">X</view>
            </view>
            <view class="field" v-if="searchInfo.priceSort != ''">
            	<view>{{searchInfo.priceSort}}</view>
                <view class="close_field" @click="closeField('priceSort')">X</view>
            </view>
            <view class="field" v-if="searchInfo.salesSort != ''">
            	<view>{{searchInfo.salesSort}}</view>
                <view class="close_field" @click="closeField('salesSort')">X</view>
            </view> -->
        </view>
        <view style="width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;">
            <view class="goods2" v-for="(item,index) in pageResult.list" :key="index" @click="jump('storeOneView', item.id)">
                <image :src="item.picture" mode=""></image>
                <view class="goods2_line">
                    <text class="price_name state_1">{{item.priceName}}</text>
                    <text class="sale_price">￥{{item.minPrice}}</text>
                </view>
                <view class="goods2_line">
                    <text class="cost_price" style="margin-right: 20rpx;">销量：{{item.sales}}</text>
                    <text class="cost_price">门市价：{{item.marketMinPrice}}</text>
                </view>
                <view class="goods2_line">
                    <view class="line_name">
                        <text v-if="item.reductionName != ''" style="background:rgba(235, 89, 56, 1);padding: 6rpx;color: #fff;margin-right: 6rpx;">{{item.reductionName}}</text>
                        <text>{{item.name}}</text>
                    </view>
                </view>
            </view>
        </view>
        <uni-popup ref="searchPopup" type="right" :mask-click="false">
        	<view class="searchPopup">
        		<view class="searchTitle">
                    高级搜索
                    <image @click="close()" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
                </view>
        		<view class="searchParam">
        			<view class="lable_left">关键词</view>
                    <view class="lable_right"><uniSearchBar v-if="isReload" radius="36" cancelButton="none" placeholder="商品名称" v-model="keywords" searchWidth="95%;padding:0" bgColor="#fff;border: 1rpx solid #333;"></uniSearchBar></view>
        		</view>
                <view class="searchParam" v-if="keywordList.length > 0">
                	<view class="lable_left">历史搜索</view>
                    <view class="lable_right line-item">
                        <view class="option" v-for="(item,index) in keywordList" :key="index" @click="checkFun('keywords', item.keywords)">{{item.keywords}}</view>
                    </view>
                </view>
                <view class="searchParam" v-if="brandList.length > 0">
                    <view class="line-item">
                        <view class="option" v-for="(item,index) in brandList" :key="index" @click="checkFun('brand', item.itemId)">{{item.itemName}}</view>
                    </view>
                </view>
                <!-- <view class="searchParam" v-if="cateList.length > 0">
                    <view class="lable_right line-item">
                        <view class="option" v-for="(item,index) in cateList" :key="index" @click="checkFun('cate', item.itemId)">{{item.itemName}}</view>
                    </view>
                </view> -->
                <!-- <view class="searchParam">
                	<view :class="'selItem ' + (pageParam.isRecommend ? 'active' : '')" @click="selParamFun('isRecommend')">推荐</view>
                    <view :class="'selItem ' + (pageParam.isHot ? 'active' : '')" @click="selParamFun('isHot')">热门</view>
                    <view :class="'selItem ' + (pageParam.isNew ? 'active' : '')" @click="selParamFun('isNew')">新品</view>
                </view> -->
                <!-- <view class="searchParam">
                    <view class="selRadio" @click="selParamFun('priceSort')"><i :class="'radio2 ' + (pageParam.priceSort ? 'check ' : '')"></i><span>价格优先</span></view>
                    <view class="selRadio" @click="selParamFun('salesSort')"><i :class="'radio2 ' + (pageParam.salesSort ? 'check ' : '')"></i><span>销量优先</span></view>
                </view> -->
                <view :style="'height:' + bottomHeight + 'rpx;'" class="searchBtn" @click="subSearch()">搜索</view>
        	</view>
        </uni-popup>
    </view>
</template>

<script>
    var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
                info: {
                    pageTitle: '品鉴云仓',
                    dataState: '',
                    dataJumpType: '',
                    dataJumpVal: '',
                    dataTitle: '',
                    dataVal: '',
                },
                keywords: {
                	value: '',
                },
                searchInfo: {
                    isSearch: false,
                    keywords: '',
                    brandName: '',
                    cateName: '',
                    priceSort: '',
                    salesSort: '',
                    isRecommend: '',
                    isHot: '',
                    isNew: ''
                },
                isSelf: false,
                isReload: false,
                brandList: [],
                cateList: [],
                keywordList: [],
				selOrder: 0,
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					keywords: '',
                    storeType: 21,
                    merchantId: 0,
					cateId: 0,
                    brandId: 0,
					seriesId: 0,
					priceSort: 0,
					salesSort: 0,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
                openAdv: {
                    title: '',
                    cover: '',
                    jumpType: '',
                    jumpLink: '',
                    isShow: false,
                },
				bottomHeight: 110,
			}
		},
		methods: {
            selParamFun(field) {
                _self.pageParam.brandId = 0;
                _self.pageParam.cateId = 0;
                _self.pageParam.keywords = '';
                _self.keywords.value = '';
                _self.pageParam.isRecommend = 0;
                _self.pageParam.isHot = 0;
                _self.pageParam.isNew = 0;
                // _self.pageParam.keywords = _self.keywords.value;
                _self.pageParam.page = 0;
                _self.pageResult.list = [];
                _self.pageParam[field] = _self.pageParam[field] ? 0 : 1;
                if(field == 'priceSort' && _self.pageParam.priceSort == 1) {
                    _self.pageParam.salesSort = 0;
                }
                if(field == 'salesSort' && _self.pageParam.salesSort == 1) {
                    _self.pageParam.priceSort = 0;
                }
                _self.getList();
                _self.close();
            },
            getSearchList() {
                serve.request({
                    url: '/store/one/search-list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        storeType: _self.pageParam.storeType,
                        merchantId: _self.pageParam.merchantId,
                    },
                    v: '/v3',
                }).then(res => {
                    _self.brandList = res.data.brandList;
                    _self.cateList = res.data.categoryList;
                    _self.keywordList = res.data.keywordList;
                    return ;
                });
            },
            subSearch() {
                _self.pageParam.brandId = 0;
                _self.pageParam.cateId = 0;
                // _self.pageParam.keywords = '';
                // _self.keywords.value = '';
                _self.pageParam.isRecommend = 0;
                _self.pageParam.isHot = 0;
                _self.pageParam.isNew = 0;
                _self.pageParam.keywords = _self.keywords.value;
                _self.pageParam.page = 0;
                _self.pageResult.list = [];
                _self.getList();
                _self.close();
            },
            closeField(field) {
                _self.pageParam[field] = field == 'keywords' ? '' : 0;
                _self.keywords.value = '';
                _self.subSearch();
            },
            checkFun(type, k) {
                _self.pageParam.brandId = 0;
                _self.pageParam.cateId = 0;
                _self.pageParam.keywords = '';
                _self.keywords.value = '';
                _self.pageParam.isRecommend = 0;
                _self.pageParam.isHot = 0;
                _self.pageParam.isNew = 0;
                _self.pageParam.salesSort = 0;
                _self.pageParam.priceSort = 0;
                if(type == 'brand') {
                    _self.pageParam.brandId = k;
                }
                if(type == 'cate') {
                    _self.pageParam.cateId = k;
                }
                if(type == 'keywords') {
                    _self.keywords.value = k;
                    _self.pageParam.keywords = k;
                }
                _self.pageParam.page = 0;
                _self.pageResult.list = [];
                _self.getList();
                _self.close();
                return ;
            },
            close() {
                _self.$refs.searchPopup.close();
            },
            searchFun(type) {
                if(type == 'brand') {
                    _self.$refs.brandPopup.open();
                }
                if(type == 'cate') {
                    _self.$refs.catePopup.open();
                }
                if(type == 'other') {
                    _self.isReload = true;
                    _self.$refs.searchPopup.open();
                }
                _self.$forceUpdate();
                return ;
            },
			selOrderFun(k) {
				if(this.selOrder == k) {
					return ;
				}
				this.selOrder = k;
				this.pageParam.priceSort = k == 2 ? 1: 0;
				this.pageParam.salesSort = k == 1 ? 1: 0;
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.getList();
			},
			getInfo() {
				serve.request({
                    url: '/store/one/info',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v3',
                }).then(res => {
                    _self.info = res.data;
                });
			},
			getList() {
				_self.pageParam.page++
				serve.request({
                    url: '/store/one/list',
                    data: _self.pageParam,
                    v: '/v3',
                }).then(res => {
                    if(_self.pageParam.page * 1 == 1 * 1) {
                        _self.searchInfo = res.data.searchInfo;
                    }
                    if (res.data.productList && res.data.productList.length > 0) {
                        _self.pageResult.list = _self.pageResult.list.concat(res.data.productList);
                    }
                    _self.pageResult.isEmpty = _self.pageResult.list.length == 0;
                    _self.pageResult.isEnd = res.data.productList.length == 0;
                    _self.$forceUpdate();
                });
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
            _self = this;
			if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
				_self.bottomHeight = 150;
			}
            _self.getInfo();
			_self.pageParam.keywords = options.keywords || '';
			_self.keywords.value = _self.pageParam.keywords;
			_self.pageParam.brandId = options.brandId || 0;
			_self.pageParam.cateId = options.cateId || 0;
			_self.pageParam.seriesId = options.seriesId || 0;
            _self.pageParam.page = 0;
            _self.pageResult.list = [];
            _self.getSearchList();
			_self.getList();
		},
		onPullDownRefresh() {
			_self.pageParam.page = 0;
			_self.pageResult.list = [];
			_self.getList();
		},
		onReachBottom() {
			if (_self.pageResult.isEnd || _self.pageResult.isEmpty) {
				return
			}
			_self.getList();
		}
	}
</script>

<style scoped lang="scss">
	.detail {
        padding-bottom: 120upx;
		
		.dataInfo {
		        display: flex;
		        justify-content: space-between;
		        align-items: center;
		        padding: 20rpx 5%;
		        border-bottom: 1rpx dashed;
		}
		.open {
		    background-color: #ececec;
		
		    image {
		        width: 100%;
		        height: auto;
		        margin-top: 10upx;
		        border-radius: 10upx;
		    }
		}
        .nav {
        	box-sizing: border-box;
        	width: 100%;
        	display: flex;
        	justify-content: space-between;
        	padding: 40upx;
        	border-bottom: 8upx #b1b1b3 solid;
        	.item {
        		display: flex;
        		align-items: center;
        		font-size: 36upx;
        
        		image {
        			width: 42upx;
        			height: 42upx;
        			margin-right: 12upx;
        		}
        	}
			.selCate{
				font-size: 38upx;
				font-weight: 600;
				color: #3333FF;
			}
        }
        .search_field {
            box-sizing: border-box;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            padding: 10rpx;
            border-bottom: 8rpx #b1b1b3 solid;
            .field {
                display: flex;
                background: #eaeaea;
                padding: 20rpx;
                margin: 10rpx 20rpx;
                border-radius: 20rpx;
                font-size: 28rpx;
                align-items: center;
                .close_field {
                    margin-left: 20rpx;
                    color: #fff;
                    background: red;
                    padding: 5rpx;
                    border-radius: 50%;
                    width: 20rpx;
                    height: 20rpx;
                    font-size: 20rpx;
                    line-height: 20rpx;
                    text-align: center;
                    font-weight: bold;
                }
            }
        }
        .goods{
        	display: flex;
        	box-sizing: border-box;
        	align-items: flex-start;
        	padding: 20rpx;
        	border-bottom: 1px solid #ebebeb;    
            position: relative;
            .recommend{
                position: absolute;
                left: 10rpx;
                top: 0rpx;
                padding: 5rpx 10rpx;
                background: #0000ff;
                color: #fff;
                font-size: 26rpx;
                border-radius: 10rpx;
            }
            .hot{
                position: absolute;
                left: 70rpx;
                bottom: 5rpx;
                padding: 5rpx 10rpx;
                background: #ff000f;
                color: #fff;
                font-size: 26rpx;
                border-radius: 10rpx;
            }
            .new {
                position: absolute;
                left: 120rpx;
                top: 0rpx;
                padding: 5rpx 10rpx;
                background: #1086e4;
                color: #fff;
                font-size: 26rpx;
                border-radius: 10rpx;
            }
        	.left_item {						
        		margin-right: 15rpx;
        		image {
        			width:180rpx;
        			height:180rpx;
        		}
        	}
        	
        	.right_item {
        		flex: 1;
        		.right_con{
        			text-overflow: -o-ellipsis-lastline;
        			overflow: hidden;
        			text-overflow: ellipsis;
        			display: -webkit-box;
        			-webkit-line-clamp: 2;
        			line-clamp: 2;
        			-webkit-box-orient: vertical;
        			white-space:unset;
        			.oneline{
        				
        				text-overflow: -o-ellipsis-lastline;
        				overflow: hidden;
        				text-overflow: ellipsis;
        				display: -webkit-box;
        				-webkit-line-clamp: 2;
        				line-clamp: 2;
        				-webkit-box-orient: vertical;
        				white-space:unset;
        			}
        			.name{
        				display: initial;
        				max-width: 300rpx;
        				font-size: 34rpx;
        			}
        			.rate{
        				color: #FFBC00;
        				font-size: 30rpx;
        				margin-top: 10rpx;
        			}
                    .market{
                        color: #5f5b5b;
                        font-size: 30rpx;
                        margin-top: 10rpx;
                        text-decoration: line-through;
                    }
        			.state{
        				display: initial;
        			    padding: 5rpx 8rpx;
        			    text-align: center;
        			    color: #FFFFFF;
        			    font-size: 32rpx;
        			    border-radius:2rpx;
        			    margin-right: 10rpx;
        			}
        		}
                .sales {
                    display: flex;
                    align-items: center;
                    font-size: 28upx;
                        
                    image {
                        width: 36upx;
                        height: 36upx;
                        margin-right: 12upx;
                    }
                }
        	}
        }
        .goods2 {
        	width: 45vw;
            padding-bottom: 30rpx;
            border: 6rpx solid #eaeaea;
            margin: 10rpx 1% 0 1%;
            padding: 10rpx 4rpx;
            text-align: center;
            border-radius: 10rpx;
        	image {
        		width: 330upx;
        		height: 330upx;
                border: 1rpx solid #eee;
        		border-radius: 2%;
        	}
        	.line_name{
        		font-size:30upx;
        		line-height: 50upx;
        		color: #333;
        		text-overflow: -o-ellipsis-lastline;
        		overflow: hidden;
        		text-overflow: ellipsis;
        		display: -webkit-box;
        		-webkit-line-clamp: 2;
        		-webkit-box-orient: vertical;
        	}
        	.goods2_line{
                text-align: center;
        	}
            .price_name {
                font-size: 28rpx;
                text-align: right;
            }
            .sale_price {
                font-size: 42rpx;
                color: #e61d07;
            }
            .cost_price {
                text-align: right;
                font-size: 26rpx;
                color: #615555;
            }
        }
        .searchPopup {
        	display: flex;
        	min-height: 100vh;
        	width: 100vw;
        	background: rgba(#fff, 1);
        	border-radius: 0upx;
        	position: absolute;
        	left: 0;
        	top: 0;
        	margin-top: 160upx;
        	padding-top: 20upx;
        	flex-direction: column;
        	font-size: 30upx;
        }
        
        .brandPopup {
        	display: flex;
        	min-height: 100vh;
        	width: 100vw;
            // margin-left: 20vw;
        	background: rgba(#fff, 1);
        	border-radius: 0upx;
        	position: absolute;
        	left: 0;
        	top: 0;
        	margin-top: 160upx;
        	padding-top: 20upx;
        	flex-direction: column;
        	font-size: 30upx;
        }
        
        .brandItem {
            padding: 20rpx;
            border-bottom: 1rpx ridge #ccc;
        }
        .brandTitle{
            // padding: 20rpx;
            text-align: center;
            font-size: 42rpx;
        }
        .brandChild{
            display: flex;
            align-items: center;
            // justify-content: space-around;
            flex-wrap: wrap;
        }
        .childItem{
            margin: 0 20rpx 20rpx 0;
            text-align: center;
            border: 1rpx solid #FFFFFF;
            image {
                width: 150rpx;
                height: 150rpx;
            }
        }
        .selCheckbox{    
            width: 150rpx;
            height: 60rpx;
        }
        .childItem.check {
        	color: #ff000f;
            border: 1rpx solid #ff000f;
        }
        .searchTitle {
        	display: flex;
            padding: 15rpx 0rpx;
            justify-content: center;
            align-items: center;
            color: #000000;
            font-size: 36rpx;
            border-bottom: 1rpx solid #000000;
            
        	image {
        		width: 40rpx;
                height: 40rpx;
                position: absolute;
                right: 20rpx;
        	}
        }
        .searchParam {
            display: flex;
            align-items: center;
            padding: 20rpx;
            border-bottom: 1rpx ridge #ccc;
        }
        .lable_left{
            width: 25%;
            text-align: center;
        }
        .lable_right{
            width: 75%;
        }
        .line-item {
            display: flex;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
        .option{
            border: 1rpx solid #ccc;
            padding: 10rpx;
            border-radius: 20rpx;
            margin: 8rpx;
        }
        .selItem {
            width: 30%;
            text-align: center;
            border: 1rpx solid #eaeaea;
            border-radius: 20rpx;
            margin-right: 8%;
            height: 60rpx;
            line-height: 60rpx;
            letter-spacing: 5rpx;
        }
        .active {
            border: 1rpx solid #FFBF0A;
            background: #FFBF0A;
        }
        .selRadio{
            width: 50%;
            display: flex;
            align-items: center;
            padding: 0 20rpx;
        }      
        .radio2 {
        	display: block;
        	width: 48upx;
        	height: 48upx;
        	border: 1px solid rgba(57, 72, 107, 1);
        	border-radius: 50%;
        	box-sizing: border-box;
        	margin-right: 10upx;
        }                     
        .radio2.check {
        	border: none;
        	background: url(http://app.chinasrv.com/attachment/xcx/my/check.png);
        	background-size: 100% auto;
        }
        .searchBtn{
            width: 100vw;
            position: fixed;
            left: 0;
            bottom: 0;
            height: 100upx;
            background: #FFBF0A;
            color: #fff;
            font-size: 32upx;
            line-height: 100upx;
            text-align: center;
            border-radius: 0;
        
            &::after {
             border: none;
            }
        }
    }
</style>
